<template>
  <div class="contanier border_top">
    <div class="nav flex align-center">
      <div
        v-for="(item, index) in navList"
        :key="index"
        class="flex align-center"
        :class="nav_act == index ? 'active' : ''"
        @click="navclcik(index, item.path)"
      >{{item.name}}</div>
      <span class="morex">[查看更多]</span>
    </div>
    <div class="li_dynamic" v-if="nav_act==0">
      <ul style="margin:0;padding:0">
        <li class="flex border_bottom" @click="open" v-for="(n,m) in newList" :key="m">
          <img src="../../../assets/img/zxdt1.png" alt />
          <div>
            <span>{{n.title}}</span>
            <p>{{n.customurl}}</p>
            <b>[MORE]</b>
          </div>
        </li>
        <!-- <div class="border_bottom" style="margin-top:10px"></div> -->
      </ul>
    </div>
    <div class="li_dynamic" v-else>
      <ul style="margin:0;padding:0">
        <li class="flex" @click="open">
          <img src="../../../assets/img/zxdt1.png" alt />
          <div>
            <span>市委常委会召开2020年第35次会议</span>
            <p>12月31日，市委书记李卫平主持召开市委常委会2020年第35次会议。</p>
            <b>[MORE]</b>
          </div>
        </li>
        <div class="border_bottom" style="margin-top:10px"></div>
        <li class="flex" style="margin-top:10px" @click="open">
          <img src="../../../assets/img/zxdt2.png" alt />
          <div>
            <span>古交市举行项目投资合作洽谈会</span>
            <p>12月23日上午，古交市与中国电建集团北方投资公司举行项目投资合作洽谈会。</p>
            <b>[MORE]</b>
          </div>
        </li>
        <div class="border_bottom" style="margin-top:10px"></div>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [],
      nav_act: 0,
      newList: [],
      pageSize: "3",
      currentPage: "1",
      cOLUMNID: "",
    };
  },
  components: {},
  mounted() {
    this.getnew();
    this.getList();
  },
  methods: {
    navclcik(index, path) {
      this.nav_act = index;
    },
    open() {
      let routeData = this.$router.resolve({
        path: "/newxq",
        query: { id: 1 },
      });
      window.open(routeData.href, "_blank");
    },
    getnew() {
      this.$api
        .getnewCenter({})
        .then((res) => {
          this.navList = res.data.data;
        })
        .catch((e) => {});
    },
    getList() {
      this.$api
        .getnewList({
          pageSize:this.pageSize,
          currentPage:this.currentPage,
          cOLUMNID:this.cOLUMNID
        })
        .then((res) => {
          this.newList = res.data.data.list;
        })
        .catch((e) => {});
    },
  },
};
</script>

<style lang="stylus" scoped>
.contanier {
  width: 588px;
  height: 420px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.nav {
  position: relative;
}

.nav>div {
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #BF242A;
  padding: 0 20px;
  cursor: pointer;
}

.nav>div.active {
  color: #ffffff;
  border-color: #ffffff;
  background: #EB424C;
  // border-image: -webkit-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: -moz-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: linear-gradient(to right, #00036B, #409EFF) 30 30;
}

.morex {
  display: inline-block;
  font-size: 14px;
  color: #666666;
  position: absolute;
  right: 12px;
  cursor: pointer;
}

.li_dynamic {
  margin-left: 12px;

  li {
    list-style: none;
    margin-top: 18px;
    position: relative;

    div {
      margin-left: 10px;
      margin-top: 5px;

      span {
        font-size: 16px;
        color: #323131;
      }

      span:hover {
        color: #EB424C;
        cursor: pointer;
      }

      p {
        color: #323131;
        font-size: 14px;
        margin-top: 5px;
        cursor: pointer;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      b {
        font-weight: normal;
        font-size: 14px;
        color: #323131;
        position: absolute;
        right: 10px;
      }

      b:hover {
        color: #EB424C;
        cursor: pointer;
      }
    }
  }
}
</style>